import { useEffect, useState } from "react";
import initLoginBg from "./init.ts";
import styles from "./login.module.scss";
import { Input, Space, Button, message } from "antd";
import "antd/dist/antd.css";
import "./login.less";
import { CaptchaAPI, LoginAPI } from "@/request/api";
import {
  UserOutlined,
  EyeInvisibleOutlined,
  EyeTwoTone,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";

const View = () => {
  const navigateTo = useNavigate();
  // 背景处理
  useEffect(() => {
    initLoginBg();
    window.onresize = function () {
      initLoginBg();
    };
    getCaptchaImg();
  }, []);
  const [userName, setUserName] = useState("");
  const [password, setpassword] = useState("");
  const [captcha, setcaptcha] = useState("");
  const [captchaImg, setcaptchaImg] = useState("");
  const usernameChange = (e: ChangeEvent<HTMLElement>) => {
    setUserName(e.target.value);
  };
  const passwordChange = (e: ChangeEvent<HTMLElement>) => {
    setpassword(e.target.value);
  };
  const captchaChange = (e: ChangeEvent<HTMLElement>) => {
    setcaptcha(e.target.value);
  };

  // 验证码
  const getCaptchaImg = async () => {
    let res = await CaptchaAPI();
    console.log(res);
    if (res.code === 200) {
      setcaptchaImg("data:image/gif;base64," + res.img);
      localStorage.setItem("uuid", res.uuid);
    }
  };
  // 登录
  const gotoLogin = async () => {
    // 校验空值
    if (!userName.trim() || !password.trim() || !captcha.trim()) {
      message.warning("请完整输入信息！");
      return;
    }
    let loginRes = await LoginAPI({
      username: userName,
      password: password,
      code: captcha,
      uuid: localStorage.getItem("uuid"),
    });
    console.log(loginRes);
    if (loginRes.code === 200) {
      // 1、提示登录成功
      message.success("登录成功！");
      // 2、保存token
      localStorage.setItem("archill-react-management-token", loginRes.token);
      // 3、跳转到/page1
      navigateTo("/page1");
      // 4、删除本地保存中的uuid
      localStorage.removeItem("uuid");
    }
  };
  return (
    <div className={styles.loginPage}>
      <canvas id="canvas" style={{ display: "block" }}></canvas>
      <div className={styles.loginBox + " loginbox"}>
        <div className={styles.title}>
          <h1>Archill&nbsp;·&nbsp;management demo </h1>
        </div>
        <Space direction="vertical" size="middle" style={{ display: "flex" }}>
          <Input
            size="large"
            placeholder="请输入用户名"
            onChange={usernameChange}
          />
          <Input.Password
            size="large"
            placeholder="input password"
            onChange={passwordChange}
            iconRender={(visible) =>
              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
            }
          />
          <div className="captchaBox">
            <Input
              placeholder="验证码"
              className="ipt"
              onChange={captchaChange}
            />
            <div className="captchaImg">
              <img
                height="38"
                src={captchaImg}
                alt=""
                onClick={getCaptchaImg}
              />
            </div>
          </div>
          <Button type="primary" className="loginBtn" block onClick={gotoLogin}>
            登录
          </Button>
        </Space>
      </div>
    </div>
  );
};
export default View;
